Bootstrap 是一個 HTML / CSS / Javascript 的前端框架，這個框架在設計時，就已經考慮到 RWD 與行動網站，也就是說，在使用這個框架以後，網頁的排版就可以自動依據螢幕尺寸來調整版面。而且套用後的版面已經具備一定程度的簡潔與美觀，這對於不擅長前端設計介面的開發者來說，可以說是福音。

Django 的 template (樣板)本身就已經很有彈性，基本上自己在 template 裡加入 bootstrap 的 css / javascript，並使用對應的 class 跟排版就可以使用 bootstrap 。但是，像是分頁元件、該含括的 css / javascript 檔案等等的，有沒有函式庫已經幫我們把 bootstrap4 包裝好，讓我們可以直接使用呢？

有的，就是 django-bootstrap4 ，接下來我們就來看看怎麼使用吧。

安裝

poetry add django-bootstrap4

設定

在 INSTALLED_APPS 需要加入 bootstrap4，Django 的 template 引擎才知道有 bootstrap4 函式庫。

# settings
INSTALLED_APPS = [
  # ...
  'bootstrap4',
  # ...
]

另外也可以加入這些設定，來指定 CDN 以及細部的顯示控制：

# Default settings
BOOTSTRAP4 = {
    # 完整的 Bootstrap CSS URL
    # 可以直接用 URL
    # 例如 "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css",
    # 或是一個像下面的 dict
    "css_url": {
        "href": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css",
        "integrity": "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB",
        "crossorigin": "anonymous",
    },

    # 完整的 Bootstrap JavaScript URL
    # 同上
    "javascript_url": {
        "url": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js",
        "integrity": "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T",
        "crossorigin": "anonymous",
    },

    # Bootstrap CSS Theme URL (None 表示沒有佈景主題)
    "theme_url": None,

    # jQuery JavaScript URL (完整的)
    "jquery_url": {
        "url": "https://code.jquery.com/jquery-3.3.1.min.js",
        "integrity": "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT",
        "crossorigin": "anonymous",
    },

    # jQuery JavaScript URL (精簡版)
    "jquery_slim_url": {
        "url": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
        "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
        "crossorigin": "anonymous",
    },

    # Popper.js JavaScript file (精簡版，popper.js 是用來顯示tooltip用的函式庫)
    "popper_url": {
        "url": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js",
        "integrity": "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49",
        "crossorigin": "anonymous",
    },

    # 把 Javascript 放在 HEAD 裡 (只有 extends 'bootstrap4.html' 才有用)
    'javascript_in_head': False,

    # 用 bootstrap_javascript 時，是否要包含 jQuery，預設值是 False
    'include_jquery': False,

    # 直立表單裡，Label 要使用的 class 
    'horizontal_label_class': 'col-md-3',

    # 直立表單裡，Field 要使用的 class
    'horizontal_field_class': 'col-md-9',

    # 如果沒有指定 placeholder 時，要不要把 placeholder 的內容指定為 Label 
    'set_placeholder': True,

    # 指示為 required (必須) 時的 Class
    'required_css_class': '',

    # 指示錯誤時的 Class
    'error_css_class': 'is-invalid',

    # 指示成功時的 Class
    'success_css_class': 'is-valid',

    # 用來處理 formset / form / field 顯示的類別
    # 這意味著可以自定。
    'formset_renderers':{
        'default': 'bootstrap4.renderers.FormsetRenderer',
    },
    'form_renderers': {
        'default': 'bootstrap4.renderers.FormRenderer',
    },
    'field_renderers': {
        'default': 'bootstrap4.renderers.FieldRenderer',
        'inline': 'bootstrap4.renderers.InlineFieldRenderer',
    },
}

你也可以不加這些設定，直接使用 django-bootstrap4 的預設值。

使用

django-bootstrap4 主要是提供一組 template tags，讓我們可以直接在 template 裡使用，讓我們看看 Quickstart 裡的範例

{# 載入 template tags #}
{% load bootstrap4 %}

{# 載入 CSS 與 JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# 以 Bootstrap alerts 來顯示 django messages #}
{% bootstrap_messages %}

{# 顯示表單 #}
<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      Submit
    </button>
  {% endbuttons %}
</form>

load bootstrap4 是表明載入 template tags ，如果有使用到跟 django-bootstrap4 的 template tags ，就必須要加上這行。

bootstrap_css / bootstrap_javascript 是載入 Bootstrap 的 CSS / JavaScript。

bootstrap_messages 是以 Bootstrap alerts 元件來顯示 django messages。

bootstrap_form / buttons 是顯示表單，因為 Bootstrap 的表單有規定，必須要依照其規定，才能讓表單顯示成 Bootstrap 的樣子。

除了上述提到的 template tags 以外，還有以下可以使用：

• bootstrap_jquery_url / bootstrap_css_url / bootstrap_javascript_url ：bootstrap jquery / css / javascript 的網址。
• bootstrap_form_errors / bootstrap_formset / bootstrap_formset_errors ：表單的錯誤顯示以及表單組的顯示
• bootstrap_field / bootstrap_label ：個別顯示欄位以及標籤
• bootstrap_button ：顯示按鈕
• bootstrap_alert：顯示錯誤訊息
• bootstrap_pagination：顯示分頁

結語

django-bootstrap4 的介紹就到這裡，透過使用 django-bootstrap4 ，可以學習到別人怎麼使用 bootstrap4，同時也可以統一使用 bootstrap4 的方式。

參考資料

• Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學｜ALPHA Camp Blog